<template>
    <div class="account_set_resource_container">
        <vxe-table-template :data="dataList" :options.sync="tableOptions"
                            @event="handleTableEvent" />
    </div>
</template>
<script>

export default {
    name: 'AccountSetResource',
    props: {
        propsData: {
            type: Object,
            default() {
                return {
                    init: true,
                };
            },
        },
    },
    provide() {
        return {
            setChildrenRef: (name, ref) => {
                this[name] = ref;
            },
        };
    },
    data() {
        const _this = this;
        return {
            dataList: [],
            tableOptions: {
                ref: "AccountSetResTable",
                container: ".account_set_resource_container",
                multiSelect: true,
                columns: [
                    {
                        label: "资源名称",
                        prop: "resource_name",
                        align: "center",
                    },
                ],
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                },
            },
            selectionList: [],
            selectionAll: [],
            //弹窗option
            dialogOption: {
                visible: false,
            },
            form: {},
        };
    },
    watch: {
        propsData: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (_this.propsData.init) {
                return;
            }
            if (!_this.$utils.isNotEmpty(_this.propsData.account_set_sid)) {
                return;
            }
            _this.selectionList = [];
            if (_this[_this.tableOptions.ref]) {
                _this[_this.tableOptions.ref].clearCheckboxRow();
            }
            _this.getList();
        },
        getList() {
            let _this = this;
            _this.dataList = [];
            return _this.fetchData(_this.$api.API_FindSysAccountSetResources4Setting, {
                account_set_sid: _this.propsData.account_set_sid,
            }).then(result => {
                _this.dataList = result.data || [];
                let filter = _this.dataList.filter(item => _this.$utils.isNotEmpty(item.id));
                if (_this.$utils.isNotEmptyList(filter) && _this[_this.tableOptions.ref]) {
                    _this.$nextTick(() => {
                        filter.forEach(item => {
                            _this[_this.tableOptions.ref].setCheckboxRow(item, true);
                        });
                    });
                }
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'selectionChange') {
                this.selectionList = event.value;
            }
        },
        async confirm() {
            const _this = this;
            let subData = {
                account_set_sid: _this.propsData.account_set_sid,
            };
            subData.list = _this.selectionList.map(item => {
                let obj = $.extend({}, item);
                obj.account_set_sid = _this.propsData.account_set_sid;
                return obj;
            });
            return _this.fetchData(_this.$api.API_SaveSysAccountSetResources, subData).then(() => {
                _this.$message.success('更新成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
};
</script>
<style lang="less" rel="stylesheet/less">
.small_dialog .el-select {
    display: block;

    .el-input__inner {
        width: 100%;
    }
}

.small_dialog {
    width: 100vw;

    .el-dialog {
        width: 600px;
    }
}
</style>
